import { useEffect, useState } from 'react';
import { useDispatch, useSelector, ArticleModelState, Loading, Link } from 'umi';

import styles from './index.less'
import './index.less'
function Articlenav() {

    // const routerlink = [
    //     {
    //         name: '所有',
    //         link: '/'
    //     },
    //     {
    //         name: '前端',
    //         link: '/category/fe'
    //     },
    //     {
    //         name: '后端',
    //         link: '/category/be'
    //     },
    //     {
    //         name: '阅读',
    //         link: '/category/reading'
    //     },
    //     {
    //         name: 'Linux',
    //         link: '/category/linux'
    //     },
    //     {
    //         name: 'LeetCode',
    //         link: '/category/leetcode'
    //     },
    //     {
    //         name: '要闻',
    //         link: '/category/news'
    //     },
    // ]

    const { article } = useSelector((state: { article: ArticleModelState, loading: Loading }) => {
        return {
            article: state.article,
        }
    });

    const dispatch = useDispatch();

    // hooks的生命周期
    useEffect(() => {
        dispatch({
            type: 'article/getArticleNavList',
        })
    }, []);
    // console.log(article.getArticleNavList);

    return (
        <div className={styles.articlenav}>
            <a href="/">首页</a>
            {
                article.getArticleNavList.map((item, index) => {
                    return <Link key={index} to={`/category/${item.value}`}>
                        <span>{item.label}</span>
                    </Link>
                })
            }
        </div>)
}

export default Articlenav